<template>

  <div class="bi">
    <span :class="{icon:true,yes:value,no:!value}">
      <i v-if="value" class="el-icon-circle-check"></i>
      <i v-else class="el-icon-circle-close"></i>
    </span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "BooleanIcon",
  props: {
    value: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="less">
.bi {
  margin-top: 10px;

  &:last-child {
    margin-top: 0;
  }
}
.icon{
  margin-right: 10px;
}
.yes {
  color: #67C23A;
}

.no {
  color: #F56C6C;
}

</style>
